import React, { useContext } from "react";
import classes from "./Index.module.css";
import menuSvg from "../../assets/svg/Index/menu.svg";
import Card from "../../components/MyIndex/Card";
import savings from "../../assets/svg/Index/savings.svg";
import reminders from "../../assets/svg/Index/reminders.svg";
import purseSvg from "../../assets/svg/Index/purse.svg";
import purseActiveSvg from "../../assets/svg/Index/purse-active.svg";
import { useState } from "react";
import MenuTitle from "../../components/MenuTitle/MenuTitle";
import RecordList from "../../components/RecordList/RecordList";
import ThemeContext from "../../store/themeContext";
import bg1 from "../../assets/svg/bg.svg";
import bg2 from "../../assets/svg/bg-dark.svg";
export default function Index() {
    const { theme } = useContext(ThemeContext);
    let [cardListData, setCardListData] = useState([
        {
            name: "Total Salary",
            check: false,
        },
        {
            name: "Total Expense",
            check: true,
        },
        {
            name: "Monthly Expense",
            check: false,
        },
    ]);
    let [cardListData2, setCardListData2] = useState([
        {
            name: "Savings",
            url: savings,
            check: false,
        },
        {
            name: "Reminders",
            url: reminders,
            check: false,
        },
        {
            name: "Budget",
            url: purseActiveSvg,
            check: true,
        },
    ]);
    let menuData = [
        { name: "Food", date: "20 Feb 2020", methods: "Google Pay" },
        { name: "Uber", date: "26 Feb 2020", methods: "Cash" },
        { name: "Shopping", date: "28 Feb 2020", methods: "Paytm" },
    ];
    const handleClick = (name) => {
        setCardListData(() => {
            return cardListData.map((item) => {
                if (item.name === name) {
                    item.check = true;
                } else {
                    item.check = false;
                }
                return item;
            });
        });
    };
    const handleClick2 = (name) => {
        setCardListData2(() => {
            return cardListData2.map((item) => {
                if (item.name === name) {
                    item.check = true;
                } else {
                    item.check = false;
                }
                return item;
            });
        });
    };
    return (
        <div
            className={classes.myIndex}
            style={{
                backgroundColor: theme === "light" ? "#fdfdfd" : "#121212",
            }}
        >
            <header
                style={{
                    background: `url(${theme === "light" ? bg1 : bg2})  center bottom/cover no-repeat`,
                }}
            >
                <div className={classes.headerTop}>
                    <img style={{ filter: theme === "light" ? "drop-shadow(rgb(31, 49, 74) 100rem 0)" : "drop-shadow(rgb(255, 255, 255) 100rem 0)" }} src={menuSvg} alt="menu" />
                    <div style={{ backgroundColor: theme === "light" ? "#dedfef" : "#38393a" }}></div>
                </div>
                <div className={classes.headerMiddle}>
                    <h3 style={{ color: theme === "light" ? "#2f2f2f" : "#fff" }}>Overview</h3>
                    <div className={classes.cardList}>
                        <ul>
                            {cardListData.map((item, index) => (
                                <Card handleClick={handleClick} key={index} padding="34rem 16rem 29rem" width="124rem" item={item} flag={true} column={null}>
                                    <img src={item.url ? item.url : item.check ? purseActiveSvg : purseSvg} alt="card" />
                                </Card>
                            ))}
                        </ul>
                    </div>
                </div>
            </header>
            <div className={classes.headerBottom}>
                <ul>
                    {cardListData2.map((item, index) => (
                        <Card handleClick={handleClick2} svg={item.url} key={index} padding="25rem 16rem 2rem" width="132rem" item={item} flag={false} column={true}>
                            <div
                                style={{
                                    display: "flex",
                                    alignItems: "center",
                                    justifyContent: "center",
                                    borderRadius: "8rem",
                                    background: `${item.check ? "#99cfe3" : "#e5e6ee"}`,
                                    height: "38rem",
                                    width: "38rem",
                                }}
                            >
                                <img src={item.url ? item.url : item.check ? purseActiveSvg : purseSvg} alt="card" />
                            </div>
                        </Card>
                    ))}
                </ul>
            </div>
            <div className={classes.menu}>
                <MenuTitle theme={theme} title={"Latest Entries"} />
                <ul className={classes.menuList}>
                    {menuData.map((item, index) => (
                        <RecordList key={index} theme={theme} item={item} />
                    ))}
                </ul>
            </div>
        </div>
    );
}
